<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!--====== Required meta tags ======-->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
        <title th:text="${websiteConfigVO.getWebsiteName()}"></title>
        <!--====== Favicon Icon ======-->
        <script th:src="@{https://cdn.jsdelivr.net/npm/vue/dist/vue.js}"></script>
        <script th:src="@{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js}"></script>
        <link rel="stylesheet" th:href="@{/css/search.css}">
        <!--====== Flaticon css ======-->
        <link rel="stylesheet"th:href="@{/css/flaticon.css}">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" th:href="@{/css/all.min.css}">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
        <!--====== magnific-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/slick.css}">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" th:href="@{/css/nice-select.css}">
        <!--====== Animate css ======-->
        <link rel="stylesheet" th:href="@{/css/animate.css}">
        <!--====== Default css ======-->
        <link rel="stylesheet" th:href="@{/css/default.css}">
        <!--====== Style css ======-->
        <link rel="stylesheet" th:href="@{/css/style.css}">
    </head>
    <body>
        <!--====== Start Preloader ======-->
        <div class="preloader">
            <div class="loader">
                <div class="pre-shadow"></div>
                <div class="pre-box"></div>
            </div>
        </div><!--====== End Preloader ======-->
        <!--====== Search From ======-->
		<div class="modal fade search-modal" id="search-modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 800px;max-width: 90%">
                <div class="modal-content">
                    <!--前台白底显示-->
                    <div id="app">
                        <div class="search-wrapper" style="border-radius:4px">
                            <div class="mb-3">
                                <span class="search-title">本地搜索</span>
                                <span class="float-right" @click="searchFlag = false">
<!--            <i class="material-icons">close</i>-->
          </span>
                            </div>
                            <div class="search-input-wrapper">
<!--                                <i class="material-icons">search</i>-->
                                <input v-model="keywords" placeholder="输入文章标题或内容..." style="border:none"/>
                            </div>
                            <div class="search-result-wrapper">
                                <hr class="divider" />
                                <ul>
                                    <li class="search-reslut" v-for="item of articleList" :key="item.id">
                                        <a @click="goTo(item.id)" v-html="item.articleTitle" style="text-decoration: none;border-bottom: 1px solid white;"></a>
                                        <p class="search-reslut-content text-justify" v-html="item.articleContent"></p>
                                    </li>
                                </ul>
                                <div v-show="flag && articleList.length == 0" style="font-size:0.875rem">
                                    找不到您查询的内容：{{ keywords }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--====== Search From ======-->
        <!--====== Start Header ======-->
        <header class="header-area transparent-header">
            <!--=== Header Navigation ===-->
            <div class="header-navigation navigation-two navigation-white">
                <div class="nav-overlay"></div>
                <div class="container-fluid">
                    <!--=== Primary Menu ===-->
                    <div class="primary-menu">
                        <!--=== Site Branding ===-->
                        <div class="site-branding">
                            <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-white.png}" alt="Site Logo"></a>
                        </div>
                        <!--=== Nav Inner Menu ===-->
                        <div class="nav-menu">
                            <!--=== Mobile Logo ===-->
                            <div class="mobile-logo mb-30 d-block d-xl-none text-center">
                                <a th:href="@{/}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                            </div>
                            <!--=== Main Menu ===-->
                            <nav class="main-menu">
                                <ul>
                                    <li class="menu-item "><a th:href="@{/}">首页</a></li>
                                    <li class="menu-item has-children"><a >竞赛</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/front/news_list}">竞赛新闻</a></li>
                                            <li><a th:href="@{/front/notices_list}">竞赛通知</a></li>
                                            <li><a th:href="@{/front/answers_list}">竞赛题解</a></li>
                                            <li><a th:href="@{/front/gallerys_list}">竞赛现场</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/front/peoples_list}">名人堂</a>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/about}">竞赛报名</a>
                                    </li>
                                    <li class="menu-item"><a th:href="@{http://acm.zut.edu.cn/}">竞赛转播</a></li>
                                    <li class="menu-item"><a th:href="@{/contact}">加入我们</a></li>
                                    <li class="menu-item"><a class="search-btn" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal"><i class="far fa-search"></i></a></li>
                                </ul>
                            </nav>
                        </div>
                        <!--=== Nav right Item ===-->
                        <div class="nav-right-item d-flex align-items-center">
                            <!--                            <div class="menu-button d-xl-block d-none">-->
                            <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                            <!--                            </div>-->
                            <li class="menu-item" style="list-style: none;margin-top: 10px">
                                <a class="search-btn" style="color: #fff;font-size: 30px;display: none;" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal">
                                    <i class="far fa-search"></i>
                                </a>
                            </li>
                            <div class="navbar-toggler">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header><!--====== End Header ======-->
        <!--====== Start Banner Section ======-->
        <section class="banner-section">
            <div class="hero-wrapper-two">
                <div class="hero-slider-two">
                    <div class="single-slider" th:each="item:${OnePhotoList}">
                        <div class="image-layer bg_cover" th:style="'background-image: url(' + ${item.getPhotoSrc()} + ');'"></div>
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-xl-6 col-lg-10">
                                    <div class="hero-content text-white text-center">
                                        <span class="sub-title" data-animation="fadeInDown" data-delay=".4s" th:text="${websiteConfigVO.getWebsiteName()}"></span>
                                        <h1 data-animation="fadeInUp" data-delay=".6s" th:text="${item.getPhotoDesc()}"></h1>
                                        <span class="sub-title" data-animation="fadeInDown" data-delay=".4s" th:text="${websiteConfigVO.getWebsiteIntro()}"></span>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

<!--                    <div class="single-slider">
                        <div class="image-layer bg_cover" th:style="'background-image: url(' + @{/picture/awards/icpc4.jpg} + ');'"></div>
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-xl-6 col-lg-10">
                                    <div class="hero-content text-white text-center">
                                        <span class="sub-title" data-animation="fadeInDown" data-delay=".4s">中原工学院ACM官方网站</span>
                                        <h3 data-animation="fadeInUp" data-delay=".6s">祝贺ACM试验室在第十三届河南省ICPC荣获金奖</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->

                </div>
            </div>
        </section><!--====== End Banner Section ======-->

        <!--====== Start About Section ======-->
        <section class="about-section pt-100 pb-45">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-5 col-lg-12">
                        <div class="about-content-box mb-50 wow fadeInLeft">
                            <div class="section-title mb-20">
                                <span class="sub-title">01</span>
                                <h2>为什么<span class="thin">加入ACM？</span></h2>
                            </div>
                            <p >Q：想锻炼自己的编程能力？</p>
                            <p >Q：想与全世界的算法爱好者切磋？</p>
                            <p >Q：想在工作、考研中获得优势？</p>
                            <p >Q：想不虚度大学光阴，找到可以奋斗四年的目标？</p>
                            <p class="mb-40">Q：想成为Legendary Grandmaster？</p>
                            <p >A：欢迎加入中原工学院 ACM 实验室！你离精英只差一个 ACM 的距离！</p>
                            <div class="experience-box d-flex">
                                <div class="icon">
                                    <img th:src="@{/picture/line2.png}" alt="Shape">
                                </div>
                                <div class="big-text">
                                    <h2 class="number">12 <span class="symbol">+</span></h2>
                                </div>
                                <div class="text">
                                    <h6>Years Of Competition Experience</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-7 col-lg-12">
                        <div class="about-one_image-box mb-20 p-r z-1 wow fadeInRight" >
                            <img th:src="${FirstPhotos_one.getPhotoSrc()}" class="about-img-one mb-30" alt="About Image">
                            <img th:src="${FirstPhotos_two.getPhotoSrc()}" class="about-img-two mb-30" alt="About Image">
                            <div class="icon-box">
                                <i class="flaticon-tent-5"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End About Section ======-->
        <!--====== Start Service Section ======-->
        <section class="service-section pb-60">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-7 col-lg-10">
                        <div class="section-title text-center mb-50 wow fadeInDown">
                            <span class="sub-title">02</span>
                            <h2>我们的竞赛实力</h2>
                            <span class="thin">历经多年，中原工学院ACM实验室在 ACM-ICPC 亚洲区域赛、中国高校天梯赛、蓝桥杯、河南省赛等国际、国家、省级各类比赛中斩获金、银、铜百余枚奖项。</span>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="single-service-item-two mb-40 wow fadeInUp">
                            <div class="img-holder">
                                <img th:src="${SecondPhotos_one.getPhotoSrc()}" alt="Service Image">
                                <div class="hover-overlay"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="single-service-item-two mb-40 wow fadeInDown">
                            <div class="img-holder">
                                <img th:src="${SecondPhotos_two.getPhotoSrc()}" alt="Service Image">
                                <div class="hover-overlay"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="single-service-item-two mb-40 wow fadeInUp">
                            <div class="img-holder">
                                <img th:src="${SecondPhotos_three.getPhotoSrc()}" alt="Service Image">
                                <div class="hover-overlay"></div>
                                <div class="hover-content">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Service Section ======-->
        <!--====== Start Video Section ======-->
        <section class="video-bg-section pt-140 pb-110 p-r z-1 bg_cover" th:style="'background-image: url(' + @{/picture/awards/code3.jpg} + ');'">
        <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="video-content-box text-white text-lg-start text-md-center mb-40 wow fadeInLeft">
                            <h2 class="mb-30">准备好开始你的ACM竞赛之旅吧！</h2>
                            <a th:href="@{https://www.bilibili.com/video/BV1uG411j7w9/?spm_id_from=333.337.search-card.all.click&vd_source=20b14ecd53d70e35d9dd730d8f1bf1c2}" target="_blank" class="main-btn btn-green">观看视频<i class="far fa-angle-double-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="play-box text-lg-end text-md-center mb-40 wow fadeInRight">
                            <a th:href="@{https://www.bilibili.com/video/BV1uG411j7w9/?spm_id_from=333.337.search-card.all.click&vd_source=20b14ecd53d70e35d9dd730d8f1bf1c2}" class="video-popup"><i class="fas fa-play"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Video Section ======-->
        <!--====== Start Features Section ======-->
        <section class="features-section pt-100 pb-35">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInDown">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-cottage-1"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">学习</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>多多参与ACM竞赛以后，C程序设计、数据结构、算法、离散数学等等这些对于大多数同学有难度的课程ACMer可以轻易拿到高分。 </p>
<!--                                <a th:href="@{/accommodation-details}" class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInUp">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-tent-6"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">工作</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>据非官方统计，在ACM区域赛上拿到铜牌 10W 年薪的工作很简单，银牌 15W，金牌 20W 到无上限，但归根结底还是要自己努力付出，才会有收获。 </p>
<!--                                <a th:href="@{/accommodation-details}" class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInDown">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-hiking-1"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">考研</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>考研的面试、笔试、上机，对于 ACMer 来说，很容易解决。几乎大部分名牌高校研究生的夏令营中都有对我们ACM竞赛的认定。有过ACM竞赛经历的同学，在同届毕业生中，数据结构和算法能力可以说是最优秀的，有着巨大的优势。 </p>
<!--                                <a th:href="@{/accommodation-details}" class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInUp">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-washing-machine"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">抗压</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>每队使用1台电脑在5小时内使用C/C++、Java和Python中的一种编写程序解决7到13个问题。因此，在长期的竞赛训练中你的抗压能力将得到极大的提升。</p>
                                <!--                                <a th:href="@{/accommodation-details}" class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInUp">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-campfire-1"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">交友</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>玩 ACM 可以结交很多来自全国其他各个高校的朋友，而且都是精英中的精英。自行脑补与清华、北大等学校同台竞技的感觉！</p>
<!--                                <a th:href="@{/accommodation-details} " class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-sm-12">
                        <div class="fancy-icon-box-two mb-55 wow fadeInDown">
                            <div class="icon-title d-flex">
                                <div class="icon">
                                    <i class="flaticon-eco-house"></i>
                                </div>
                                <div class="title">
                                    <h5 class="title">阅历</h5>
                                </div>
                            </div>
                            <div class="text">
                                <p>每年的区域赛都在全国各地举办，例如北京（烤鸭）、青岛（大虾）、沈阳（乱炖）、杭州（醋鱼）、西安（肉夹馍）……，在不同的城市、不同的大学比赛，可以感受不同的文化。</p>
<!--                                <a th:href="@{/accommodation-details}" class="btn-link">Read more <i class="far fa-angle-double-right"></i></a>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Features Section ======-->
        <!--====== Start Accommodation Section ======-->
        <section class="accommodation-section pb-100">
            <div class="container-fluid">
                <div class="service-slider-one wow fadeInDown">
                    <div class="single-service-item-four" th:each="item:${SysPhotos}">
                        <div class="img-holder" >
                            <img th:src="${item.getPhotoSrc()}" alt="Service Image">
                            <div class="hover-content">
<!--                                <div class="inner-content d-flex justify-content-between">-->
<!--                                    <div class="text">-->
<!--                                        <a th:href="@{/accommodation-details}" class="btn-link">check availability<i class="far fa-angle-double-right"></i></a>-->
<!--                                    </div>-->
<!--                                    <div class="icon">-->
<!--                                        <a th:href="@{/accommodation-details}" class="icon-btn"><i class="far fa-arrow-right"></i></a>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Accommodation Section ======-->
        <!--====== Start Choose Section ======-->
        <section class="choose-section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="choose-content-box pr-lg-50 mb-50 wow fadeInLeft">
                            <div class="section-title mb-20">
                                <span class="sub-title"><span class="number">03</span>招新方向</span>
                                <h2>竞赛组</h2>
                            </div>
                            <p class="mb-30">&emsp;&emsp;培养学科竞赛能力为主，参加ACM/ICPC、CCPC、天梯赛、蓝桥杯等在国内外享誉已久的比赛。ACM竞赛有助于锻炼数学思维，打好编程功底，且奖项含金量很高。很多人都会说ACM要考察的算法在以后的工作中根本用不上，其实这些人是忽略了“内功”和“招式”的区别。参加ACM竞赛所提升的数学思维、解决问题的能力和编码能力会在日后工作中慢慢流露，与此同时，这也是你升职加薪的谈判条件。进入竞赛组最重要的一点是“希望你热爱算法竞赛本身，而不是其背后功利。”</p>
                            <ul class="check-style-two mb-35">
                                <li><i class="flaticon-draw-check-mark"></i>ICPC</li>
                                <li><i class="flaticon-draw-check-mark"></i>CCPC</li>
                                <li><i class="flaticon-draw-check-mark"></i>天梯赛</li>
                                <li><i class="flaticon-draw-check-mark"></i>蓝桥杯</li>
                            </ul>
<!--                            <a th:href="@{/index0}" class="main-btn btn-yellow">learn more us<i class="far fa-angle-double-right"></i></a>-->
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="adventure-one_image-box p-r z-1 wow fadeInRight">
                            <img th:src="${ThreePhotos_one_one.getPhotoSrc()}" class="img-one" alt="Image">
<!--                            <img th:src="${ThreePhotos_one_two.getPhotoSrc()}" class="img-two" alt="Image">-->
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Choose Section ======-->
        <!--====== Start Features Section ======-->
        <section class="features-bg-section p-r z-1 pt-50 pb-50">
            <div class="features-bg-two bg_cover wow fadeInLeft" th:style="'background-image: url(' + ${ThreePhotos_two.getPhotoSrc()} + ');'"></div>
            <div class="container">
                <div class="row justify-content-end">
                    <div class="col-lg-6">
                        <div class="features-content-box mb-50 pl-lg-50 wow fadeInRight">
                            <div class="section-title mb-30">
                                <span class="sub-title"><span class="number">03</span>招新方向</span>
                                <h2>项目组</h2>
                            </div>
                            <p>&emsp;&emsp;培养项目开发能力为主，尝试当下热门的计算机开发技术并将其用于实际项目的开发。有一定竞赛经验和编程基础后，若想转变方向，可进项目组进行项目开发与维护。你想知道OJ的内部原理吗？你想知道怎么才能让OJ页面变得丝滑吗？你想知道如何自建库查重吗？你想知道如何处理高并发吗？进项目组可解决你的困惑。</p>
                            <ul class="check-style-one mb-35">
                                <li><i class="flaticon-draw-check-mark"></i>进项目组前必须为ACM实验室队员，参加过竞赛培训，有扎实的编程基础</li>
                            </ul>
                            <div class="counting-box mt-40">
                                <div class="title">
                                    <h5>学习进度加速中 <span>99%</span></h5>
                                    <div class="progress">
                                        <div class="progress-bar wow slideInLeft" style="width: 99%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Features Section ======-->

        <!--====== Start Features Section ======-->
        <section class="features-bg-section p-r z-1 pt-50 pb-50">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-12">
                        <div class="row align-items-center">
                            <div>
                                <div class="hero-area-form wow fadeInLeft" data-wow-delay=".6s">
                                    <div class="section-title mb-30">
                                        <span class="sub-title">04</span>
                                        <h2>加入ACM实验室的方式</h2>
                                    </div>
                                    <p>&emsp;&emsp;实验室遵循公平公正的选拔原则，不论年级、专业，只要参加ACM-ICPC 实验室线下招新赛成绩较好，有能力、激情、肯吃苦的同学就可以加入实验室。</p>
                                    <p>&emsp;&emsp;有同学说，我能力不够怎么办。不用着急，只要你踏实努力了，我们每年有三次选拔的机会在等你，机会这么多，只要你有心，肯定会有你的一片天空！具体选拔赛通知，请加入当年招新群，了解一下！</p>
                                    <!--                            <a th:href="@{/index0}" class="main-btn btn-yellow">learn more us<i class="far fa-angle-double-right"></i></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12" style="border-radius: 30px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);">
                        <div class="hero-area-form wow fadeInRight" data-wow-delay=".6s">
                            <form class="adventure-hero-form">
                                <div class="row">
                                    <div>
                                        <div class="form_group">
                                            <span>每年10月份</span>
                                            <input type="text" class="form_control " placeholder="开展刷题月">
                                        </div>
                                    </div>
                                    <div>
                                        <div class="form_group">
                                            <span>每年12月份</span>
<!--                                            <label><i class="far fa-calendar-alt"></i></label>-->
                                            <input type="text" class="form_control " placeholder="依托于中原工学院ACM新生赛的选拔">
                                        </div>
                                    </div>
                                    <div>
                                        <div class="form_group">
                                            <span>每年4月份</span>
<!--                                            <label><i class="far fa-user"></i></label>-->
                                            <input type="text" class="form_control" placeholder="依托于中原工学院校赛的选拔">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form_group" >
                                            <button class="main-btn btn-green" th:href="@{http://acm.zut.edu.cn/}">
                                                了解！现在开始刷题！<i class="far fa-angle-double-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Features Section ======-->

        <!--====== Start Testimonial Section ======-->
        <section class="testimonial-bg-section text-white p-r z-1 dark-black-bg pt-90 pb-60">
            <div class="testimonial-bg bg_cover" th:style="'background-image: url(' + @{./images/hero-slider-three.jpg} + ');'"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-7 col-lg-10">
                        <div class="section-title text-center mb-50">
                            <span class="sub-title">05</span>
                            <h2>师长寄语</h2>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-12">
                        <div class="testimonial-slider-two wow fadeInDown">
                            <div class="single-testimonial-item-two">
                                <div class="testimonial-content">
                                    <div class="quote">
                                        <i class="flaticon-quote"></i>
                                    </div>
                                    <p>我希望你们能够珍惜时间，不断学习、进步，尽可能掌握更多的知识和技能，同时将这些应用于实际项目，为实验室的发展做出贡献。</p>
                                    <div class="author-title-thumb d-inline-flex">
                                        <div class="author-thumb">
                                            <img th:src="@{/picture/author-thumb-2.jpg}" alt="Author Thumb">
                                        </div>
                                        <div class="author-title">
                                            <h4 class="title">崔岩老师</h4>
                                            <p class="position">ACM集训队教练</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="single-testimonial-item-two">
                                <div class="testimonial-content">
                                    <div class="quote">
                                        <i class="flaticon-quote"></i>
                                    </div>
                                    <p>作为ACM实验室的学长，我希望你在这里能够享受成长，多学习，多尝试新的东西，当你在享受成长的过程中，就不会太在意其中的挫折。</p>
                                    <div class="author-title-thumb d-inline-flex">
                                        <div class="author-thumb">
                                            <img th:src="@{/picture/author-thumb-2.jpg}" alt="Author Thumb">
                                        </div>
                                        <div class="author-title">
                                            <h4 class="title">王强强</h4>
                                            <p class="position">西安电子科技大学</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="single-testimonial-item-two">
                                <div class="testimonial-content">
                                    <div class="quote">
                                        <i class="flaticon-quote"></i>
                                    </div>
                                    <p>来到ACM实验室，你会遇到许多志同道合的伙伴，我们会与你一起相互切磋，相互帮助，让你的编程之路变得更加充实。我希望你能够在这个集体中找到归属感，并且通过团队合作实现共同目标。</p>
                                    <div class="author-title-thumb d-inline-flex">
                                        <div class="author-thumb">
                                            <img th:src="@{/picture/author-thumb-2.jpg}" alt="Author Thumb">
                                        </div>
                                        <div class="author-title">
                                            <h4 class="title">刘勇</h4>
                                            <p class="position">南京理工大学</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12">
                        <div class="testimonial-one_image-box wow fadeInUp">
                            <img th:src="${FivePhotos.getPhotoSrc()}" alt="testimonial image">
                        </div>
                    </div>
                </div>
                <div class="copyright-area">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="copyright-text" style="margin-top: 20px">
                                <p>版权所有&copy; <span style="color:#63AC45;">中原工学院ACM官方网站</span></p>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="copyright-nav float-lg-end" style="margin-top: 20px">
                                <p>网络备案号：<span style="color:#63AC45;" th:text="${websiteConfigVO.getWebsiteRecordNo()}"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Testimonial Section ======-->

        <!--====== Start Footer ======-->
<!--        <footer class="footer-area footer-two light-gray-bg">-->
<!--            <div class="container">-->
<!--                <div class="copyright-area">-->
<!--                    <div class="row">-->
<!--                        <div class="col-lg-6">-->
<!--                            <div class="copyright-text">-->
<!--                                <p class="title">版权所有&copy; <span style="color:#63AC45;">中原工学院ACM官方网站</span></p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-6">-->
<!--                            <div class="copyright-nav float-lg-end">-->
<!--                                <p>网络备案号：<span style="color:#63AC45;" th:text="${websiteConfigVO.getWebsiteRecordNo()}"></span></p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </footer>&lt;!&ndash;====== End Footer ======&ndash;&gt;-->
        <!--====== Back To Top  ======-->
        <a th:href="@{/index0}" class="back-to-top"><i class="far fa-angle-up"></i></a>
        <!--====== Jquery js ======-->
        <script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script><script th:src="@{/js/jquery-3.6.0.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/popper.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <!--====== Slick js ======-->
        <script th:src="@{/js/slick.min.js}"></script>
        <!--====== Magnific js ======-->
        <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
        <!--====== Isotope js ======-->
        <script th:src="@{/js/isotope.min.js}"></script>
        <!--====== Imagesloaded js ======-->
        <script th:src="@{/js/imagesloaded.min.js}"></script>
        <!--====== Counterup js ======-->
        <script th:src="@{/js/jquery.counterup.min.js}"></script>
        <!--====== Waypoints js ======-->
        <script th:src="@{/js/jquery.waypoints.js}"></script>
        <!--====== Nice-select js ======-->
        <script th:src="@{/js/jquery.nice-select.min.js}"></script>
        <!--====== jquery UI js ======-->
        <script th:src="@{/js/jquery-ui.min.js}"></script>
        <!--====== WOW js ======-->
        <script th:src="@{/js/wow.min.js}"></script>
        <!--====== Main js ======-->
        <script th:src="@{/js/theme.js}"></script>
        <script>
            new Vue({
                el: "#app",
                data: function() {
                    return {
                        keywords: "",
                        articleList: [],
                        flag: false,
                        searchFlag: false
                    };
                },
                methods: {
                    goTo(articleId) {
                        this.searchFlag = false;
                        window.location.href = "/blogs/" + articleId;
                    }
                },
                watch: {
                    keywords(value) {
                        this.flag = value.trim() != "" ? true : false;
                        axios
                            .get("/articles/search", {
                                params: { current: 1, keywords: value }
                            })
                            .then(({ data }) => {
                                this.articleList = data.data;
                            });
                    }
                }
            });
        </script>
<!--        <script>
            const searchInput = document.getElementById('search-input');
            const searchResultList = document.getElementById('search-result-list');

            searchInput.addEventListener('input', (event) => {
                const searchText = event.target.value;
                // 向后端发送 Ajax 请求，根据输入框中的内容获取匹配的文章列表，以下仅为示例代码
                fetch(`/articles/search(current=1,keywords=${searchText})`)
                    .then(response => response.json())
                    .then(data => {
                        // 清空原有的搜索结果
                        searchResultList.innerHTML = '';
                        // 动态渲染新的搜索结果
                        data.forEach(result => {
                            const listItem = document.createElement('li');
                            listItem.className = 'search-result';
                            const titleLink = document.createElement('a');
                            titleLink.href = `/blogs/${result.id}`; // 假设文章详情页的 URL 为 '/article/{id}'
                            titleLink.style.fontSize = '24px';
                            titleLink.textContent = result.title;
                            const contentParagraph = document.createElement('p');
                            contentParagraph.className = 'search-result-content';
                            contentParagraph.textContent = result.content;
                            listItem.appendChild(titleLink);
                            listItem.appendChild(contentParagraph);
                            searchResultList.appendChild(listItem);
                        });
                    });
            });
        </script>-->

    </body>
</html>
<style>
    .img-one{
        width: 100%;
        height: auto;
    }

</style>